<template>
  <div class="bussiness-right">
    <div class="bussiness-right-top">
      <div class="title-top">
        <span style="color: yellow">| </span>
        <span> 私有空间使用情况 </span>
        <span style="color: yellow"> |</span>
      </div>
      <div class="el-1 carousel-right">
        <el-carousel :height="bannerHeight+'px'" :interval=2500>
          <el-carousel-item style="background: transparent" v-for="item in resourcePoolData.slice(0,4)"
                            :key="item.cityName">
            <div class="carousel-right-item">
              <div class="carousel-title">{{ item.cityName }}</div>
              <div class="carousel-use-wrapper">
                <p>使用人数</p>
                <div class="carousel-user">
                  <div class="carousel-num">
                    {{ item.userNum }}
                  </div>
                </div>
              </div>
              <div class="carousel-script-wrapper">
                <p>脚本数量</p>
                <div class="carousel-script">
                  <div class="carousel-num">
                    {{ item.scriptNum }}
                  </div>
                </div>
              </div>
              <div class="carousel-memory">
                <img class="chart-img-head" src="../../assets/img/b-img/resource_pool_head.png" alt="">
                <div class="chart-title">使用内存</div>
                <div class="chart-value">{{ unitConversion(item.memoryUsed) }}</div>
                <div class="chart-img-foot">
                  <img class="foot-img" src="../../assets/img/b-img/resource_pool_foot.png" alt="">
                </div>
              </div>
              <div class="carousel-storage">
                <img class="chart-img-head" src="../../assets/img/b-img/resource_pool_head.png" alt="">
                <div class="chart-title">使用储存</div>
                <div class="chart-value">{{ unitConversion(item.storageUsed) }}</div>
                <div class="chart-img-foot">
                  <img class="foot-img" src="../../assets/img/b-img/resource_pool_foot.png" alt="">
                </div>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
      <hr class="line1"/>
      <div class="el-2 carousel-right">
        <el-carousel indicator-position="outside" :height="bannerHeight+'px'">
          <el-carousel-item style="background: transparent" v-for="item in resourcePoolData.slice(4,8)"
                            :key="item.cityName">
            <div class="carousel-right-item">
              <div class="carousel-title">{{ item.cityName }}</div>
              <div class="carousel-use-wrapper">
                <p>使用人数</p>
                <div class="carousel-user">
                  <div class="carousel-num">
                    {{ item.userNum }}
                  </div>
                </div>
              </div>
              <div class="carousel-script-wrapper">
                <p>脚本数量</p>
                <div class="carousel-script">
                  <div class="carousel-num">
                    {{ item.scriptNum }}
                  </div>
                </div>
              </div>
              <div class="carousel-memory">
                <img class="chart-img-head" src="../../assets/img/b-img/resource_pool_head.png" alt="">
                <div class="chart-title">使用内存</div>
                <div class="chart-value">{{ unitConversion(item.memoryUsed) }}</div>
                <div class="chart-img-foot">
                  <img class="foot-img" src="../../assets/img/b-img/resource_pool_foot.png" alt="">
                </div>
              </div>
              <div class="carousel-storage">
                <img class="chart-img-head" src="../../assets/img/b-img/resource_pool_head.png" alt="">
                <div class="chart-title">使用储存</div>
                <div class="chart-value">{{ unitConversion(item.storageUsed) }}</div>
                <div class="chart-img-foot">
                  <img class="foot-img" src="../../assets/img/b-img/resource_pool_foot.png" alt="">
                </div>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
      <hr class="line2"/>
      <div class="el-3 carousel-right">
        <el-carousel indicator-position="outside" :height="bannerHeight+'px'" :interval=3500>
          <el-carousel-item style="background: transparent" v-for="item in resourcePoolData.slice(8,11)"
                            :key="item.cityName">
            <div class="carousel-right-item">
              <div class="carousel-title">{{ item.cityName }}</div>
              <div class="carousel-use-wrapper">
                <p>使用人数</p>
                <div class="carousel-user">
                  <div class="carousel-num">
                    {{ item.userNum }}
                  </div>
                </div>
              </div>
              <div class="carousel-script-wrapper">
                <p>脚本数量</p>
                <div class="carousel-script">
                  <div class="carousel-num">
                    {{ item.scriptNum }}
                  </div>
                </div>
              </div>
              <div class="carousel-memory">
                <img class="chart-img-head" src="../../assets/img/b-img/resource_pool_head.png" alt="">
                <div class="chart-title">使用内存</div>
                <div class="chart-value">{{ unitConversion(item.memoryUsed) }}</div>
                <div class="chart-img-foot">
                  <img class="foot-img" src="../../assets/img/b-img/resource_pool_foot.png" alt="">
                </div>
              </div>
              <div class="carousel-storage">
                <img class="chart-img-head" src="../../assets/img/b-img/resource_pool_head.png" alt="">
                <div class="chart-title">使用储存</div>
                <div class="chart-value">{{ unitConversion(item.storageUsed) }}</div>
                <div class="chart-img-foot">
                  <img class="foot-img" src="../../assets/img/b-img/resource_pool_foot.png" alt="">
                </div>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>


  </div>


</template>

<script>

export default {
  name: "BussinessRight",
  data() {
    return {
      bannerHeight: "",
      resourcePoolData: [
        {
          cityName: "巴中市",
          dateTime: "2021年8月",
          userNum: 2,
          scriptNum: 2752,
          memoryMax: 1.2 * Math.pow(1024, 3),
          memoryUsed: 670 * Math.pow(1024, 2),
          storageUsed: 8 * Math.pow(1024, 2),
        },
        {
          cityName: "成都市",
          dateTime: "2021年8月",
          userNum: 7,
          scriptNum: 5771,
          memoryMax: 1.2 * Math.pow(1024, 3),
          memoryUsed: 1.3 * Math.pow(1024, 3),
          storageUsed: 105 * Math.pow(1024, 2),
        },
        {
          cityName: "德阳市",
          dateTime: "2021年8月",
          userNum: 3,
          scriptNum: 204,
          memoryMax: 1.2 * Math.pow(1024, 3),
          memoryUsed: 620 * Math.pow(1024, 2),
          storageUsed: 0
        },
        {
          cityName: "广元市",
          dateTime: "2021年8月",
          userNum: 2,
          scriptNum: 451,
          memoryMax: 1.2 * Math.pow(1024, 3),
          memoryUsed: 180 * Math.pow(1024, 2),
          storageUsed: 512 * Math.pow(1024, 1),
        },
        {
          cityName: "乐山市",
          dateTime: "2021年8月",
          userNum: 1,
          scriptNum: 34,
          memoryMax: 1.2 * Math.pow(1024, 3),
          memoryUsed: 320 * Math.pow(1024, 2),
          storageUsed: 573 * Math.pow(1024, 1),
        },
        {
          cityName: "泸州市",
          dateTime: "2021年8月",
          userNum: 1,
          scriptNum: 182,
          memoryMax: 1.2 * Math.pow(1024, 3),
          memoryUsed: 320 * Math.pow(1024, 2),
          storageUsed: 5,
        },
        {
          cityName: "眉山市",
          dateTime: "2021年8月",
          userNum: 2,
          scriptNum: 18,
          memoryMax: 1.2 * Math.pow(1024, 3),
          memoryUsed: 310 * Math.pow(1024, 2),
          storageUsed: 0,
        },
        {
          cityName: "绵阳市",
          dateTime: "2021年8月",
          userNum: 4,
          scriptNum: 4245,
          memoryMax: 1.2 * Math.pow(1024, 3),
          memoryUsed: 1000 * Math.pow(1024, 2),
          storageUsed: 34 * Math.pow(1024, 2),
        },
        {
          cityName: "攀枝花市",
          dateTime: "2021年8月",
          userNum: 5,
          scriptNum: 609,
          memoryMax: 1.2 * Math.pow(1024, 3),
          memoryUsed: 571 * Math.pow(1024, 2),
          storageUsed: 557 * Math.pow(1024, 1),
        },
        {
          cityName: "遂宁市",
          dateTime: "2021年8月",
          userNum: 1,
          scriptNum: 2,
          memoryMax: 1.2 * Math.pow(1024, 3),
          memoryUsed: 450 * Math.pow(1024, 2),
          storageUsed: 0,
        },
        {
          cityName: "内江市",
          dateTime: "2021年8月",
          userNum: 5,
          scriptNum: 452,
          memoryMax: 1.2 * Math.pow(1024, 3),
          memoryUsed: 1.1 * Math.pow(1024, 3),
          storageUsed: 8 * Math.pow(1024, 2),
        }

      ],
    }
  },
  mounted() {
    this.setSize();
    const that = this;
    window.addEventListener('resize', function () {
      that.carouselRight = $(".carousel-right").height();
      that.bannerHeight = 1 * that.carouselRight
      that.setSize();
    })
  },
  methods: {
    setSize: function () {
      this.bannerHeight = 1 * $(".carousel-right").height();
    },
    unitConversion: function (limit) {
      // 转换b kb mb gb tb带单位符号的单位转换
      // 不带单位默认是K
      limit = String(limit)
      if (limit == null || limit === "" || limit === 0) {
        return "0"
      }
      let index = 0;
      limit = limit.toUpperCase();
      if (limit.indexOf('B') === -1) {
        limit = limit + "KB";
      }
      let reCat = /[0-9]*[A-Z]B/;
      if (!reCat.test(limit) && limit.indexOf('B') !== -1) {
        limit = limit.substring(0, limit.indexOf('B'));
        limit = (limit / 1024) + 'KB';
      }
      let array = ['K', 'M', 'G', 'T', 'P'];
      for (let i = 0; i < array.length; i++) {
        if (limit.indexOf(array[i]) !== -1) {
          index = i;
          break;
        }
      }
      limit = parseFloat(limit.substring(0, (limit.length - 2)));
      while (limit >= 1024) {
        limit /= 1024;
        index += 1;
      }
      limit = limit.toFixed(1) + array[index] // 精度
      return limit;
    }
  }
}
</script>
<style>

.bussiness-right {
  height: 100%;
  width: 100%;
}


.title-top {
  margin: 12px 2px 0 4px;
  font: normal bold 12px arial, sans-serif;
  color: #ffffff;
  font-size: 0.8vw !important;
  text-align: left;
}


.bussiness-right-top {
  width: 100%;
  height: 100%;
  position: relative;
  /*background-color: #42b983;*/
}

.carousel-right {
  width: 100%;
  height: 33%;
  color: white;
  /*margin-top: 10px;*/
  /*background: #42b983;*/
}

.el-1 {
  margin-top: 13px;
}


.carousel-right-item {
  width: 100%;
  height: 100%;
  position: relative;
  /*background-color: #42b983;*/
}

.carousel-title {
  width: 70px;
  height: 25px;
  line-height: 25px;
  font-size: 0.7vw;
  text-align: center;
  color: white;
  background-image: url("../../assets/img/b-img/resource_pool_title.png");
  background-repeat: no-repeat;
  background-size: contain;
}

.carousel-use-wrapper {
  width: 45%;
  height: 30%;
  position: absolute;
  top: 15%;
  left: 2%;
}

.carousel-user {
  width: 100%;
  height: 100%;
  background-image: url("../../assets/img/b-img/resource_pool_user.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;

}

.carousel-script-wrapper {
  width: 45%;
  height: 30%;
  position: absolute;
  top: 15%;
  left: 55%;
}

.carousel-script {
  width: 100%;
  height: 100%;
  background-image: url("../../assets/img/b-img/resource_pool_user.png");
  background-repeat: no-repeat;
  /*background-size: contain;*/
  background-size: 100% 100%;

}

.carousel-num {
  position: relative;
  top: 30%;
  color: #3affe4;
  font-size: 1.3vw;
}

/*使用内存*/
.carousel-memory {
  width: 100%;
  position: absolute;
  top: 56%;
  left: 3%;
  text-align: left;
  margin: auto;
}

.chart-img-head {
  width: 10px;
  height: 10px;
  margin-right: 1px;
}

.chart-img-foot {
  width: 100%;
  margin-top: -5px;
}

.chart-title {
  display: inline-block;
  /*width: 50%;*/
  font-size: 0.75vw;
  text-align: left;
}

.chart-value {
  font-size: 1.15vw;
  color: #31eefe;
  background-repeat: no-repeat;
  text-align: right;
  position: absolute;
  right: 1.5%;
  bottom: 10%;
}

.carousel-chart {
  margin-top: 6%;
  width: 95%;
}


/*使用存储空间*/
.carousel-storage {
  width: 100%;
  position: absolute;
  top: 73%;
  left: 3%;
  text-align: left;
}

/*腰线*/
.line1, .line2 {
  background-color: #0f2646;
  border: none;
  position: relative;
  bottom: 2.5%;
  height: 1px;
}

.foot-img{
  width: 100%;
  height: 7px;
}


</style>
